<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-30 20:02:30
 * @LastEditTime: 2020-02-24 15:28:10
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="css/vant.css">
    <link rel="stylesheet" type="text/css" href="css/base.css" />
    <script type="text/javascript" src="script/jquery.js"></script>
    <script type="text/javascript" src="script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="script/vue.min.js"></script>
    <script src="script/vant.min.js"></script>
    <script type="text/javascript" src="script/fastclick.js"></script>
    <script type="text/javascript" src="script/base.js"></script>
    <style type="text/css">
        body {
            font: 600 16px/18px;
            color: #6a6f8c;
            background: url(image/login-bg.png) no-repeat;
            background-size: 100% 100%;
        }

        .login-content {
            padding: 80px 20px 20px 20px;
            width: 100%;
        }

        .login-logo {
            vertical-align: middle;
            padding-bottom: 5px;
        }

        .login-logo img {
            width: 70px;
            margin-right: 22px;
        }

        .app-name {
            border-bottom: 3px solid #cd1b21;
            display: inline-block;
            padding: 5px 0;
            font-size: 22px;
            font-weight: bolder;
            letter-spacing: 2px;
        }

        .login-group {
            margin-bottom: 15px;
        }

        .login-label {
            color: #aaa;
            font-size: 16px;
            letter-spacing: 4px;
            padding-bottom: 8px;
        }

        .login-input {
            border: none;
            padding: 15px 20px;
            border-radius: 5px;
            background: rgba(0, 0, 0, 0.1);
            width: 100%;
            color: #3a3a3a;
            display: block;
            outline: none;
        }


        .hr {
            height: 2px;
            margin: 0 0 20px 0;
            background: rgba(255, 255, 255, .2);
        }

        .foot-lnk {
            text-align: center;
        }

        .foot-lnk img {
            width: 14px;
            margin-right: 10px;
            vertical-align: sub;
        }

        .foot-lnk a {
            color: inherit;
            text-decoration: none;
            font-size: 12px;
        }

        .van-checkbox__icon .van-icon {
            background: rgba(0, 0, 0, 0.1);
        }

        .back {
            position: absolute;
            top: 20px;
            left: 10px;
            font-size: 18px;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="login-content" v-cloak>
            <div style="padding: 0 0 35px;text-align: center;">
                <span class="login-logo">
                    <img src="image/head_logo.png" />
                    <img src="image/head_text.png" style="width: 138px;margin:0;" />
                    <!-- <span class="app-name">福路德连锁</span> -->
                </span>
            </div>
            <div>


                <div>
                    <van-cell-group>
                        <van-field label="手机号" type="tel" v-model="formData.phone" placeholder="请输入您的手机号"></van-field>
                        <van-field label="短信验证码" v-model="formData.yzm" center clearable placeholder="请输入短信验证码">
                            <van-button slot="button" size="small" type="primary" :disabled="codeTime!=0"
                                @click="sendMsg">{{codeTime == 0?'获取验证码':'重新获取('+codeTime+')'}}</van-button>
                        </van-field>
                        <van-field label="密码" v-model="formData.pwd" type="password"></van-field>
                        <van-field label="确认密码" v-model="formData.pwdRepeat" type="password"></van-field>
                    </van-cell-group>
                </div>
                <div class="btn-padding">
                    <van-button :disabled="ifConfirm" :loading="ifConfirm" loading-text="数据提交中..." type="primary" block
                        @click="loginAPP">注册</van-button>
                </div>
            </div>
        </div>
        <div class="back" @click="onClickLeft">
            <van-icon name="arrow-left"></van-icon>
        </div>
    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {
        //$('.init-full').show();

        vm = new Vue({
            el: '#app',
            data: {
                showLoading: false,
                codeTime: 0,
                formData: {
                    phone: '',
                    yzm: '',
                    pwd: '',
                    pwdRepeat: ''
                },
                ifConfirm: false
            },
            created: function () {

            },
            methods: {
                sendMsg() {
                    var that = this;
                    var myreg = /^[0-9]+$/;
                    if (!myreg.test(that.formData.phone)) {
                        layer.open({
                            content: '手机号格式错误',
                            skin: 'msg',
                            time: 2
                        });
                        return false;
                    }
                    if (that.codeTime != 0) {
                        layer.open({
                            content: '请勿重复发送验证码',
                            skin: 'msg',
                            time: 2
                        });
                        return false;
                    }

                    that.codeTime = 60;
                    var timer = setInterval(function () {
                        that.codeTime--;
                        if (that.codeTime == 0) {
                            clearInterval(timer);
                        };
                    }, 1000)

                    var obj = {
                        phone: that.formData.phone
                    }

                    FLD.shoppingMallAjax('SendPhoneYzm', obj, function (res) {
                        var data = JSON.parse(res);
                        if (data.status == 200) {

                        } else {
                            layer.open({
                                content: data.msg,
                                skin: 'msg',
                                time: 2
                            });
                        }
                    })
                },
                loginAPP() {
                    var that = this;
                    if (!that.formData.phone) {
                        layer.open({
                            content: '请填写注册手机号',
                            skin: 'msg',
                            time: 2
                        });
                        return false;
                    }
                    if (!that.formData.yzm) {
                        layer.open({
                            content: '请填写验证码',
                            skin: 'msg',
                            time: 2
                        });
                        return false;
                    }
                    if (!that.formData.pwd) {
                        layer.open({
                            content: '请填写注册密码',
                            skin: 'msg',
                            time: 2
                        });
                        return false;
                    }
                    if (that.formData.pwd != that.formData.pwdRepeat) {
                        layer.open({
                            content: '两次输入的密码不一致',
                            skin: 'msg',
                            time: 2
                        });
                        return false;
                    }
                    that.ifConfirm = true;

                    var obj = {
                        phone: that.formData.phone,
                        pwd: that.formData.pwd,
                        yzm: that.formData.yzm
                    }

                    FLD.shoppingMallAjax('RegisterUser', obj, function (res) {
                        that.ifConfirm = false;
                        var data = JSON.parse(res);
                        // alert(JSON.stringify(data))
                        if (data.status == 200) {
                            window.localStorage.setItem('systemType', api.systemType);
                            //完善信息
                            api.openWin({
                                name: '完善信息',
                                url: 'html/informationPerfection.html',
                                reload: true,
                                slidBackEnabled: false,
                                pageParam: {
                                    form: 'register',
                                    id: data.data
                                }
                            })
                        } else {
                            layer.open({
                                content: data.msg,
                                skin: 'msg',
                                time: 2
                            });
                        }
                    })
                },
                onClickLeft() {
                    api.closeWin();

                }
            }
        })
    };
</script>

</html>